<template>
  <view class="add-order-container">
    <!-- 顶部标题栏 -->
    <view class="page-header">
      <view class="header-title">添加订单</view>
    </view>

    <!-- 订单信息填写 -->
    <view class="order-form">
      <!-- 商品信息展示（如果有） -->
      <view class="form-item" v-if="productInfo">
        <view class="form-label">商品信息</view>
        <view class="product-info-card">
          <image 
            class="product-image" 
            :src="productInfo.image || '/static/images/product-default.jpg'" 
            mode="aspectFill"
          ></image>
          <view class="product-details">
            <view class="product-name">{{ productInfo.name }}</view>
            <view class="product-price">¥{{ formatPrice(productInfo.price) }}</view>
          </view>
        </view>
      </view>
      
      <!-- 标题 -->
      <view class="form-item">
        <view class="form-label">订单标题</view>
        <input 
          class="form-input" 
          placeholder="请输入订单标题" 
          v-model="orderForm.title"
        />
      </view>
      
      <!-- 描述 -->
      <view class="form-item">
        <view class="form-label">订单描述</view>
        <textarea 
          class="form-textarea" 
          placeholder="请详细描述您的需求" 
          v-model="orderForm.description"
        />
      </view>
      
      <!-- 联系人姓名 -->
      <view class="form-item">
        <view class="form-label">联系人姓名</view>
        <input 
          class="form-input" 
          placeholder="请输入联系人姓名" 
          v-model="orderForm.name"
        />
      </view>
      
      <!-- 联系方式 -->
      <view class="form-item">
        <view class="form-label">联系电话</view>
        <input 
          class="form-input" 
          placeholder="请输入联系电话" 
          v-model="orderForm.phone"
        />
      </view>
      
      <!-- 服务地址 -->
      <view class="form-item">
        <view class="form-label">服务地址</view>
        <view class="address-selection">
          <input 
            class="form-input address-input" 
            placeholder="请选择服务地址" 
            v-model="orderForm.address"
          />
          <text class="choose-location-btn" @click="chooseLocation">选择位置</text>
        </view>
      </view>
      
      <!-- 订单类型 -->
      <view class="form-item">
        <view class="form-label">订单类型</view>
        <view class="type-selection">
          <view 
            class="type-option" 
            v-for="type in orderTypes" 
            :key="type.value"
            @click="selectOrderType(type.value)"
            :class="{ active: orderForm.type === type.value }"
          >
            {{ type.label }}
          </view>
        </view>
      </view>
      
      <!-- 提交按钮 -->
      <view class="submit-btn-container">
        <button class="submit-btn" @click="submitOrder">提交订单</button>
        <!-- 微信支付按钮 -->
        <button v-if="orderId && !isPaid" class="pay-btn" @click="wechatPay">微信支付</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { addWorkOrderAPI } from '@/api/order.js'
import { getCustomerInfoAPI } from '@/api/login.js'

// 订单类型选项
const orderTypes = [
  { value: 0, label: '普通' },
  { value: 1, label: '紧急' }
]

// 商品信息
const productInfo = ref(null)

// 订单表单数据
const orderForm = reactive({
  type: 0, // 默认普通类型
  title: '',
  description: '',
  name: '',
  phone: '',
  address: ''
})

// 订单ID
const orderId = ref(null)

// 是否已支付
const isPaid = ref(false)

// 位置信息（经纬度）
const locationInfo = ref({
  longitude: '',
  latitude: ''
})

// 格式化价格显示
const formatPrice = (price) => {
  if (price === undefined || price === null || isNaN(price)) {
    return '0.00';
  }
  return parseFloat(price).toFixed(2);
}

// 选择订单类型
const selectOrderType = (type) => {
  orderForm.type = type
}

// 选择位置
const chooseLocation = () => {
  // #ifdef MP-WEIXIN
  uni.chooseLocation({
    success: function (res) {
      // 只设置基本地址，允许用户在输入框中进一步编辑
      orderForm.address = res.address + (res.name ? ' ' + res.name : '');
      // 保存经纬度信息
      locationInfo.value = {
        longitude: res.longitude,
        latitude: res.latitude
      };
      // 缓存位置信息
      try {
        uni.setStorageSync('locationInfo', locationInfo.value);
      } catch (e) {
        console.error('缓存位置信息失败:', e);
      }
    },
    fail: function (err) {
      // 只有在不是用户取消操作的情况下才报错
      if (err && err.errMsg && !err.errMsg.includes('fail cancel')) {
        console.log(err);
        uni.showToast({
          title: '选择位置失败',
          icon: 'none'
        });
      }
      
      // 尝试从缓存中获取位置信息
      try {
        const cachedLocation = uni.getStorageSync('locationInfo');
        if (cachedLocation) {
          locationInfo.value = cachedLocation;
        }
      } catch (e) {
        console.error('获取缓存位置信息失败:', e);
      }
    }
  });
  // #endif
  
  // #ifndef MP-WEIXIN
  uni.showToast({
    title: '请在微信小程序中使用位置选择功能',
    icon: 'none'
  });
  // #endif
}

// 页面加载时检查是否有商品信息传入
onMounted(async () => {
  // 获取页面参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options || {};
  
  // 解析商品信息
  if (options.product) {
    try {
      productInfo.value = JSON.parse(decodeURIComponent(options.product));
      
      // 自动填充订单信息
      orderForm.title = productInfo.value.name || '';
      orderForm.description = productInfo.value.description || '';
    } catch (e) {
      console.error('解析商品信息失败:', e);
    }
  }
  
  // 尝试从缓存中获取位置信息
  try {
    const cachedLocation = uni.getStorageSync('locationInfo');
    if (cachedLocation) {
      locationInfo.value = cachedLocation;
    }
  } catch (e) {
    console.error('获取缓存位置信息失败:', e);
  }
  
  // 获取用户信息并填充联系人和电话
  try {
    // 先从本地存储获取用户信息
    const userInfo = uni.getStorageSync('userInfo');
    if (userInfo && userInfo.id) {
      // 通过API获取最新的客户信息
      const customerData = await getCustomerInfoAPI(userInfo.id);
      if (customerData) {
        // 使用真实姓名
        orderForm.name = customerData.customerName || customerData.name || '';
        // 使用电话号码
        orderForm.phone = customerData.phone || '';
      } else {
        // 如果API获取失败，则使用本地存储的信息
        orderForm.name = userInfo.name || '';
        orderForm.phone = userInfo.phone || '';
      }
    }
  } catch (e) {
    console.error('获取用户信息失败:', e);
  }
});

// 提交订单
const submitOrder = async () => {
  // 表单验证
  if (orderForm.type === null || orderForm.type === undefined) {
    uni.showToast({
      title: '请选择订单类型',
      icon: 'none'
    });
    return;
  }
  
  if (!orderForm.title) {
    uni.showToast({
      title: '请输入订单标题',
      icon: 'none'
    });
    return;
  }
  
  if (!orderForm.description) {
    uni.showToast({
      title: '请输入订单描述',
      icon: 'none'
    });
    return;
  }
  
  if (!orderForm.name) {
    uni.showToast({
      title: '请输入联系人姓名',
      icon: 'none'
    });
    return;
  }
  
  if (!orderForm.phone) {
    uni.showToast({
      title: '请输入联系电话',
      icon: 'none'
    });
    return;
  }
  
  if (!orderForm.address) {
    uni.showToast({
      title: '请输入服务地址',
      icon: 'none'
    });
    return;
  }
  
  uni.showLoading({
    title: '提交中...'
  });
  
  try {
    // 获取用户信息
    const userInfo = uni.getStorageSync('userInfo');
    
    // 检查用户是否已登录
    if (!userInfo || !userInfo.id) {
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      });
      uni.hideLoading();
      return;
    }
    
    // 构造工单数据，符合 work_order_info 表结构
    const workOrderData = {
      title: orderForm.title,
      des: orderForm.description,
      name: orderForm.name,
      phone: orderForm.phone,
      address: orderForm.address,
      payStatus: 0, // 默认未支付
      status: 0, // 默认待分配
      pic: productInfo.value?.image || null, // 商品图片，没有则传null
      customerId: userInfo.id, // 客户ID
      productId: productInfo.value?.id || null, // 关联产品ID
      dispatcherId: null, // 调度员ID，暂时为空
      employeeId: null, // 接单员工ID，暂时为空
      type: orderForm.type, // 工单类型
      price: productInfo.value?.price || 0, // 商品价格
      longitude: locationInfo.value.longitude || null, // 经度
      latitude: locationInfo.value.latitude || null // 纬度
    };
    
    // 调用API提交工单
    const result = await addWorkOrderAPI(workOrderData);
    
    if (result.success) {
      // 保存订单ID（检查data是否存在以及是否有id字段）
      if (result.data && result.data.id) {
        orderId.value = result.data.id;
      } else {
        // 如果没有返回订单ID，可以通过其他方式获取
        console.warn('订单提交成功但未返回订单ID');
      }
      
      uni.showToast({
        title: '订单提交成功',
        icon: 'success'
      });
      
      // 重置表单
      orderForm.type = 0;
      orderForm.title = '';
      orderForm.description = '';
      orderForm.name = '';
      orderForm.phone = '';
      orderForm.address = '';
      productInfo.value = null;
      locationInfo.value = {
        longitude: '',
        latitude: ''
      };
      
      // 清除缓存的位置信息
      try {
        uni.removeStorageSync('locationInfo');
      } catch (e) {
        console.error('清除缓存位置信息失败:', e);
      }
      
      // 跳转到订单列表页面
      setTimeout(() => {
        uni.redirectTo({
          url: '/pages/orders/orders'
        });
      }, 1500);
    } else {
      uni.showToast({
        title: result.message || '订单提交失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('提交订单失败:', error);
    uni.showToast({
      title: '订单提交失败: ' + (error.message || '未知错误'),
      icon: 'none'
    });
  } finally {
    uni.hideLoading();
  }
};

// 微信支付
const wechatPay = () => {
  // 检查是否已提交订单
  if (!orderId.value) {
    uni.showToast({
      title: '请先提交订单',
      icon: 'none'
    });
    return;
  }
  
  // 检查是否已支付
  if (isPaid.value) {
    uni.showToast({
      title: '订单已支付',
      icon: 'none'
    });
    return;
  }
  
  // 获取用户信息
  const userInfo = uni.getStorageSync('userInfo');
  
  // 检查用户是否已登录
  if (!userInfo || !userInfo.id) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    return;
  }
  
  // 检查是否是微信小程序环境
  // #ifndef MP-WEIXIN
  uni.showToast({
    title: '请在微信小程序中使用支付功能',
    icon: 'none'
  });
  return;
  // #endif
  
  // 调用后端微信支付接口
  uni.request({
    url: 'http://localhost:6009/order-client/wxpay/unifiedOrder', // 请根据实际情况修改URL
    method: 'POST',
    data: {
      orderId: orderId.value,
      amount: productInfo.value?.price * 100 || 1, // 金额(分)
      description: orderForm.title || '订单支付',
      openid: userInfo.openid // 用户openid
    },
    success: (res) => {
      if (res.data.code === 0) {
        // 调用微信支付
        uni.requestPayment({
          timeStamp: res.data.data.timeStamp,
          nonceStr: res.data.data.nonceStr,
          package: res.data.data.package,
          signType: res.data.data.signType,
          paySign: res.data.data.paySign,
          success: (res) => {
            uni.showToast({
              title: '支付成功',
              icon: 'success'
            });
            
            // 更新支付状态
            isPaid.value = true;
            
            // 延迟跳转，让用户看到成功提示
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/shop/shop'
              });
            }, 1500);
          },
          fail: (err) => {
            console.error('支付失败:', err);
            uni.showToast({
              title: '支付失败',
              icon: 'none'
            });
          }
        });
      } else {
        uni.showToast({
          title: res.data.msg || '支付失败',
          icon: 'none'
        });
      }
    },
    fail: (err) => {
      console.error('请求支付失败:', err);
      uni.showToast({
        title: '请求支付失败',
        icon: 'none'
      });
    }
  });
};
</script>

<style scoped>
.add-order-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  font-size: 28rpx;
}

.page-header {
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  text-align: center;
}

.header-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

/* 表单样式 */
.order-form {
  background-color: #fff;
  margin-top: 20rpx;
}

.form-item {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.form-item:last-child {
  border-bottom: none;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.form-input {
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #f5f7fa;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.address-selection {
  position: relative;
}

.address-input {
  padding-right: 180rpx;
}

.choose-location-btn {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  background-color: #1677ff;
  color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
}

.form-textarea {
  min-height: 200rpx;
  padding: 20rpx;
  background-color: #f5f7fa;
  border-radius: 10rpx;
  font-size: 28rpx;
  width: 100%;
  box-sizing: border-box;
}

/* 商品信息卡片 */
.product-info-card {
  display: flex;
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
}

.product-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-name {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.product-price {
  font-size: 26rpx;
  color: #ff4d4f;
  font-weight: bold;
}

/* 订单类型选择 */
.type-selection {
  display: flex;
  gap: 20rpx;
}

.type-option {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  background-color: #f5f7fa;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.type-option.active {
  background-color: #1677ff;
  color: #fff;
}

/* 提交按钮 */
.submit-btn-container {
  padding: 40rpx 30rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.submit-btn, .pay-btn {
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
}

.submit-btn {
  background-color: #1677ff;
  color: #fff;
}

.pay-btn {
  background-color: #07c160;
  color: #fff;
}
</style>